<template>
	<div>
		<div class="myRobot myRobotUserKnowledge">
			<robotNav></robotNav>
			<div class="myRobotRight">
				<div class="myRobotUserKnowledge_content">
					<div class="myRobotRight_title">
						<div class="myRobotRight_title_dd">知识库</div>
						<a href="#/alRobot/myRobotUserKnowledge/addKnowledgeBase"
							class="myRobotRight_title_btn notBlue"><span>+</span>添加知识库</a>
					</div>
					<div class="myRobotUserKnowledge_content_Search">
						<el-input placeholder="请输入搜索的网址或者文件名" v-model="searchName">
							<el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
						</el-input>
					</div>
					<div class="myRobotUserKnowledge_content_tab" v-loading="loading"
						element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中"
						element-loading-background="rgba(255, 255, 255, 1)">
						<div class="myRobotUserKnowledgeNav" v-show="hasSelectedItems">
							<div class="myRobotUserKnowledgeNav_left">已选择{{selectedCount}}项</div>
							<div class="myRobotUserKnowledgeNav_right">
								<button class="top_right_list" @click="handleBatchDelete">批量删除</button>
								<div class="top_right_list" @click="handleCancelSelect">取消选择</div>
							</div>
						</div>

						<div class="content_tab_title">
							<div class="tab_title_li">
								<label>
									<input type="checkbox" v-model="selectAll">
									名称
								</label>
							</div>
							<div class="tab_title_li">切片数量</div>
							<div class="tab_title_li">状态</div>
							<div class="tab_title_li">创建时间</div>
							<div class="tab_title_li">删除</div>
						</div>
						<div class="content_tab_txt">
							<div v-for="item in tableData" :key="item.id" class="tab_txt_list"
								:class="{ on: item.checked }">
								<div class="txt_list_li">
									<label>
										<input type="checkbox" v-model="item.checked">
										{{ item.original_name }}
									</label>
								</div>
								<div class="txt_list_li">{{ item.number_of_documents }}</div>
								<div class="txt_list_li"
									:class="{ 'trained': item.status === '已训练', 'inTraining': item.status !== '已训练' }">
									{{ item.is_train }}
								</div>
								<div class="txt_list_li">{{ item.create_time }}</div>
								<div class="txt_list_li"><span class="notBlue" @click="confirmDelete(item)"><img
											src="@a/img/sv87.svg" /></span></div>
							</div>
						</div>
						<div class="content_tab_page">
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
								:current-page="currentPage" :page-sizes="[20, 50, 100, 200]" :page-size="pageSize"
								layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import robotNav from "@c/common/robotNav/robotNav";
	import {
		MessageBox,
		Message
	} from 'element-ui';
	import {
		api
	} from "@/api-js";
	import config from "@/config";

	export default {
		data() {
			return {
				value1: '',
				input2: '',
				loading: true,



				baseURL: config.baseurl,
				token: localStorage.getItem('token'),
				searchName: '',
				searchIsUrl: '',
				searchIsTrain: '',
				searchCreateTime: '',
				currentPage: 1,
				pageSize: 20,
				total: 0,
				tableData: [],
				dialogVisible: false,
				dialogVisible1: false,
				buttons: [{
						label: '从网址抓取',
						value: 1
					},
					{
						label: '导入指定网址',
						value: 2
					},
					{
						label: '站点地图',
						value: 3
					},
					{
						label: '本地文件',
						value: 4
					},
				],
				formData: {
					inputValue: '',
					checkboxValues: [],
					urls: []
				},
				fileList: [],
				urlWindowTitle: '',
				urlType: 0,
			};
		},
		components: {
			robotNav
		},
		mounted() {
			this.getList();
		},

		computed: {
			//全选
			selectAll: {
				get() {
					return this.tableData.every(item => item.checked)
				},
				set(value) {
					console.log(value)
					this.tableData.forEach(item => {
						item.checked = value
					})
				},
			},

			selectedCount() {
				return this.tableData.filter(item => item.checked).length;
			},
			allCount() {
				return this.tableData.length;
			},
			hasSelectedItems() {
				return this.selectedCount > 0;
			},
		},

		methods: {
			//取消选择
			handleCancelSelect() {
				// 清空选中状态
				this.tableData.forEach(item => {
					item.checked = false;
				});
			},
			//批量删除
			handleBatchDelete() {
				const selectedItems = this.tableData.filter(item => item.checked);
				if (selectedItems.length === 0) {
					// 如果没有选中的项，可以显示一个提示信息
					this.$message.warning('请选择要删除的项');
					return;
				}

				MessageBox.confirm('确定删除选中的项吗？', '提示', {
						type: 'warning'
					})
					.then(async () => {
						// 执行批量删除操作
						for (const item of selectedItems) {
              await api.robotFiles.remove(item.id)
						}
            await this.getList()

						// 清空选中状态
						this.tableData.forEach(item => {
							item.checked = false;
						});
						this.$message.success('批量删除成功');
					})
					.catch(() => {
						// 取消删除操作
					});
			},

			async getList() {
				this.loading = true;
				const [e, r] = await api.robotFiles.list({
					robot_id: this.$store.getters.robotId,
					page: this.currentPage,
					page_size: this.pageSize,
					name: this.searchName
				});
				this.loading = false;
				if (!e && r) {
					// 初始化数据项的checked属性为true
					this.tableData = r.result.data.map(item => ({
						...item,
						checked: false
					}));
					this.total = r.result.total;
				}
			},


			confirmDelete(row) {
				MessageBox.confirm('确定删除该项吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.handleDelete(row);
					})
					.catch(() => {
						// 取消删除操作
					});
			},

			async handleDelete(row) {
				const [e, r] = await api.robotFiles.remove(row.id)
				if (!e && r) {
					this.$message({
						message: '删除成功',
						type: 'success'
					});
					await this.getList();
				}
				// 删除操作的逻辑
				// 可以弹出确认框，确认后发送删除请求
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getList();
			},

			handleSearch() {
				this.currentPage = 1;
				this.getList();
			},

			//删除
			deleteLink(index) {
				MessageBox.confirm('确定要删除这条信息吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						Message.success('删除成功!');
						this.data.splice(index, 1);
					})
					.catch(() => {
						Message.info('已取消删除');
					});
			},
		},
	}
</script>


<style>
	@import "myRobotUserKnowledge.css";
</style>